export default class {
    constructor(image, avatar, nickname) {
        this.image = image;
        this.avatar = avatar;
        this.nickname = nickname;
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
    }

    async run() {
        // 画背景
        const image = await this.loadImage(this.image);
        this.canvas.width = image.width;
        this.canvas.height = image.height;
        this.ctx.drawImage(image, 0, 0);
        // 画头像
        const avatar = await this.loadImage(this.avatar);
        avatar.width = '90';
        const avatar_circle = this.circle_image_v2(avatar);
        const avatar_dx = 80;
        const avatar_dy = 80;
        this.ctx.drawImage(avatar_circle, avatar_dx, avatar_dy);
        // 写名字
        this.ctx.fillStyle = '#9f060a';
        const nickname_size = avatar.width / 2;
        this.ctx.font = 'bold ' + nickname_size + 'px Arial';
        const nickname_dx = avatar_dx + avatar.width + 20;
        const nickname_dy = avatar.width / 2 + nickname_size / 2 + avatar_dy;
        this.ctx.fillText(this.nickname, nickname_dx, nickname_dy);
    }

    /**
     * 加载图片
     * @param {string} src 图片地址
     * @returns {HTMLImageElement} 图片标签
     */
    loadImage(src) {
        return new Promise(resolve => {
            const image = new Image();
            image.crossOrigin = 'anonymous';
            image.onload = () => resolve(image);
            image.src = src;
        });
    }

    /**
     * 把图片处理成圆形,如果不是正方形就按最小边一半为半径处理
     * @param {object} imgObj 图片(img)对象
     * @param {number} imgType 设置生成图片的大小：0设置生成的图片大小是以图片设置的css大小为准，1设置生成的图片大小是以图片分辨率为准，默认值为0
     * @return {string} return base64 png图片字符串
     */
    circle_image_v2(img, imgType) {
        var type = imgType || 0;
        var radius, diameter, canvas, contex, natural;
        if (type) {
            if (img.naturalWidth > img.naturalHeight) {
                radius = img.naturalHeight / 2;
            } else {
                radius = img.naturalWidth / 2;
            }
        } else {
            if (img.width > img.height) {
                radius = img.height / 2;
            } else {
                radius = img.width / 2;
            }
            if (img.naturalWidth > img.naturalHeight) {
                natural = img.naturalHeight;
            } else {
                natural = img.naturalWidth;
            }
        }
        diameter = radius * 2;
        canvas = document.createElement('canvas');
        if (!canvas.getContext) { // 判断浏览器是否支持canvas，如果不支持在此处做相应的提示
            console.log('您的浏览器版本过低，暂不支持。');
            return false;
        }
        canvas.width = diameter;
        canvas.height = diameter;
        contex = canvas.getContext('2d');
        contex.clearRect(0, 0, diameter, diameter);
        contex.save();
        contex.beginPath();
        contex.arc(radius, radius, radius, 0, Math.PI * 2, false);
        contex.clip();
        if (type) {
            contex.drawImage(img, 0, 0, diameter, diameter, 0, 0, diameter, diameter);
        } else {
            contex.drawImage(img, 0, 0, natural, natural, 0, 0, diameter, diameter);
        }
        contex.restore();
        return canvas;
    }
}
